import '../../wdyr'
import React, {} from 'react'
import SearchPanel from './SearchPanel'
import List from './List'
import { useDebounce,useDocumentTitle } from 'utils'
import styled from '@emotion/styled'
import { Button } from 'antd'
import { useProjects } from 'utils/project'
import { useUsers } from 'utils/user'
import { useProjectModal, useProjectSeacrchParam } from './util'
import { ErrorBox, Row } from 'components/lib'

// const apiUrl = process.env.REACT_APP_API_URL


// export default function ProjectList(props:{setProjectModalOpen:(isOpen:boolean) => void}) {
export default function ProjectList() {

  useDocumentTitle('项目列表',false)
  // const [users,setUsers] = useState([])
  // const [Loading,setLoading] = useState(false)
  // const [error,setError] =useState<null | Error>(null)
  // const [list,setList] = useState([])

  // const [,setParam] = useState({
  //   name:'',
  //   personId: ''
  // })

  // const [param,setParam] = useUrlQueryParam(['name','personId'])
  // const projectsParam = {...param,personId:Number(param.personId) || undefined}
  const [param,setParam] = useProjectSeacrchParam()
  // const debouncedParam = useDebounce(projectsParam,1000)
  // const client = useHttp()

  const{open}= useProjectModal()

  // const {isLoading,error,data:list,retry} = useProject(useDebounce(param,1000))
  const {isLoading,error,data:list} = useProjects(useDebounce(param,1000))
  const {data:users} = useUsers()

  {
  // useMount(()=>{
  //   setLoading(true)
  //   clint('projects',{data:cleanObject(debouncedParam)}).then(setList)
  //   .catch((error)=>{
  //     setList([])
  //     setError(error)
  //   }
  //     )
  //   .finally(()=>setLoading(false))
  // },debouncedParam)
  
  // useMount(()=>{
  //   fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debouncedParam))}`).then(async response => {
  //     if(response.ok){
  //       setList(await response.json())
  //     }
  //   })
  // },debouncedParam)
  }
  {
  // useMount(()=>{
  //   client('users').then(setUsers)
  // })

  // useMount(()=>{
  //   fetch(`${apiUrl}/user`).then(async response => {
  //     if(response.ok){
  //       setUser(await response.json())
  //     }
  //   })
  // })
  }

  return (
    <div>
      <Container>
        <Row between= {true}>
          <h1>项目列表</h1>
          {/* <Button onClick={() => props.setProjectModalOpen(true)}>创建项目</Button> */}
          <Button type="link" onClick={open}>创建项目</Button>
        </Row>
        <SearchPanel param={param} setParam={setParam} users={users || []}></SearchPanel>
        <ErrorBox error={error}/>
        {/* {  error?<Typography.Text type={'danger'}>{error.message}</Typography.Text>:null } */}
        {/* <List refresh={retry} loading={isLoading} dataSource={list || []} users={users || []} setProjectModalOpen={props.setProjectModalOpen}></List> */}
        <List  loading={isLoading} dataSource={list || []} users={users || []}></List>
      </Container>
    </div>
  )
}

// 只跟踪这个ProjectList组件
// ProjectList.whyDidyouRender = true

const Container = styled.div`
  padding: 3.2rem
`